<template>
  <div>
    <h1>Steps 步骤条</h1>
    <h2>基础用法</h2>
    <div class="steps-wrap">
      <Steps :active="active1" :status="status" @select-step="selectStep">
        <Step title="步骤一" :status="status1"></Step>
        <Step title="步骤二" :status="status2"></Step>
        <Step title="步骤三" :status="status3"></Step>
      </Steps>
      <Button type="primary" @click="nextStep">下一步</Button>
    </div>
    <p>设置 <code>direction</code>属性，可改变步骤条的显示方向，<code>vertical</code>为纵向显示， <code>horizontal</code>是默认值为横向显示。<code>active</code>属性接受一个Number，表示到第几步，从1开始。<code>status</code>属性为当前步骤的状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :direction=&quot;direction&quot; :active=&quot;active&quot; :status=&quot;status&quot; &gt;
        &lt;Step title=&quot;步骤一&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤二&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤三&quot; &gt;&lt;/Step&gt;
      &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              active: 2,
              stauts: 'process'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>有描述的步骤条</h2>
    <div class="steps-wrap">
      <Steps :direction="direction" :active="active" :status="status" >
        <Step title="步骤一" description="这是第一步" ></Step>
        <Step title="步骤二" description="这是第二步" ></Step>
        <Step title="步骤三" description="这是第三步" ></Step>
      </Steps>
    </div>
    <p>设置 <code>description</code>属性，对应步骤的描述，<code>title</code>属性，每个步骤的标题</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :direction=&quot;direction&quot; :active=&quot;active&quot; :status=&quot;status&quot; &gt;
        &lt;Step title=&quot;步骤一&quot; description=&quot;这是第一步&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤二&quot; description=&quot;这是第一步&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤三&quot; description=&quot;这是第一步&quot; &gt;&lt;/Step&gt;
      &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              direction: 'horizontal',
              active: 2,
              stauts: 'process'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>带图标的步骤条</h2>
    <div class="steps-wrap">
      <Steps :direction="direction" :active="active" :status="status" >
        <Step title="步骤一" description="这是第一步" :icon="icon1"></Step>
        <Step title="步骤二" description="这是第二步" :icon="icon2"></Step>
        <Step title="步骤三" description="这是第三步" :icon="icon3"></Step>
      </Steps>
    </div>
    <p>设置 <code>icon</code>属性，可这是步骤条的图标</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :direction=&quot;direction&quot; :active=&quot;active&quot; :status=&quot;status&quot; &gt;
        &lt;Step title=&quot;步骤一&quot; description=&quot;这是第一步&quot; :icon=&quot;icon1&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤二&quot; description=&quot;这是第一步&quot; :icon=&quot;icon2&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤三&quot; description=&quot;这是第一步&quot; :icon=&quot;icon3&quot; &gt;&lt;/Step&gt;
      &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              direction: 'horizontal',
              active: 2,
              stauts: 'process',
              icon1: 'icon-home',
              icon2: 'icon-edit',
              icon3: 'icon-warning'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>纵向步骤条</h2>
    <div class="steps-wrap1">
      <Steps :direction="direction1" :active="active" :status="status" >
        <Step title="步骤一" description="这是第一步" ></Step>
        <Step title="步骤二" description="这是第二步" ></Step>
        <Step title="步骤三" description="这是第三步" ></Step>
      </Steps>
    </div>
    <p>设置 <code>direction</code>属性，为<code>vertical</code>时为纵向显示</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :direction=&quot;direction&quot; :active=&quot;active&quot; :status=&quot;status&quot; &gt;
        &lt;Step title=&quot;步骤一&quot; description=&quot;这是第一步&quot;&gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤二&quot; description=&quot;这是第一步&quot;&gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤三&quot; description=&quot;这是第一步&quot;&gt;&lt;/Step&gt;
      &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              direction1: 'horizontal',
              active: 2,
              stauts: 'process'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>带时间的步骤条</h2>
    <div class="steps-wrap1">
      <Steps :direction="direction1"  :active="active4" :status="status4" timer>
        <Step title="步骤一" description="这是第一步" :time="time"></Step>
        <Step title="步骤二" description="这是第二步" :time="time"></Step>
        <Step title="步骤三" description="这是第三步" :time="time"></Step>
      </Steps>
    </div>
    <p>设置 <code>timer</code>属性为<code>true</code>时，显示时间轴，<code>time</code>属性为对应步骤的是时间点。时间轴最好在纵向显示时使用</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :direction=&quot;direction&quot; :active=&quot;active&quot; :status=&quot;status&quot; &gt;
        &lt;Step title=&quot;步骤一&quot; description=&quot;这是第一步&quot; :time=&quot;time&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤二&quot; description=&quot;这是第一步&quot; :time=&quot;time&quot; &gt;&lt;/Step&gt;
        &lt;Step title=&quot;步骤三&quot; description=&quot;这是第一步&quot; :time=&quot;time&quot; &gt;&lt;/Step&gt;
      &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              direction1: 'vertical',
              active: 2,
              stauts: 'process',
              time: '2019-09-10'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>自定义模板</h2>
    <div class="steps-wrap">
      <Steps :active="active" :status="status">
        <Step title="步骤一" description="这是第一步" ><div>自定义模板一</div></Step>
        <Step title="步骤二" description="这是第二步" ><div>自定义模板二</div></Step>
        <Step title="步骤三" description="这是第三步" ><div>自定义模板三</div></Step>
      </Steps>
    </div>
    <p>在<code>Step</code>组件中可以自定义模板，如果设置了自定义模板，<code>description</code>将无效</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Steps :active=&quot;active&quot; :status=&quot;status&quot; &gt;
          &lt;Step title=&quot;步骤一&quot; &gt; &lt;div&gt;自定义模板一&lt;/div&gt; &lt;/Step&gt;
          &lt;Step title=&quot;步骤二&quot; &gt; &lt;div&gt;自定义模板二&lt;/div&gt; &lt;/Step&gt;
          &lt;Step title=&quot;步骤三&quot; &gt; &lt;div&gt;自定义模板三&lt;/div&gt; &lt;/Step&gt;
        &lt;/Steps&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              active: 2,
              stauts: 'process'
            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>API</h2>
    <p>Steps props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>Step props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <p>Step events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-steps',
  data () {
    return {
      direction: 'horizontal', // horizontal,vertical
      direction1: 'vertical', // horizontal,vertical
      active1: 2,
      active: 2,
      active4: 1,
      icon: 'icon-success',
      status: 'process',
      title2: '步骤二',
      stepNum: 3,
      time: '2019-09-10',
      status1: 'wait',
      status2: 'wait',
      status3: 'wait',
      status4: 'finish',
      icon1: 'icon-home',
      icon2: 'icon-edit',
      icon3: 'icon-warning',
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'direction',
          explain: '步骤条的显示方向，可选值为 vertical/horizontal',
          type: 'String',
          default: 'horizontal'
        },
        {
          attribute: 'active',
          explain: '设置当前激活步骤，从1开始',
          type: 'String',
          default: '1'
        },
        {
          attribute: 'status',
          explain: '设置当前步骤的状态，可选值 wait / process / finish / error / success',
          type: 'String',
          default: 'process'
        },
        {
          attribute: 'timer',
          explain: '是否开启时间轴',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableData1: [
        {
          attribute: 'title',
          explain: '标题',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'description',
          explain: '描述性文字',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'icon',
          explain: '图标',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'time',
          explain: '时间轴对应时间点',
          type: 'String',
          default: '空'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'name'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData2: [
        {
          name: 'select-step',
          explain: '点击选中步骤条',
          callback: 'Number，选中的步骤条的序号'
        }
      ]
    }
  },
  methods: {
    nextStep () {
      if (this.active1 > this.stepNum) {
        this.active1 = 1
      } else {
        this.active1 += 1
      }
    },
    errorBtn1 () {
      this.status1 = 'error'
    },
    selectStep (num) {
      console.log('stepNum-->', num)
    }
  }
}
</script>

<style lang="less" scoped>
h2 {
  margin: 10px 0;
}
 .steps-wrap {
  width: 100%;
  margin: 20px 0;
  padding:  10px 40px 10px 10px;
 }
 .steps-wrap1 {
   height: 300px;
   margin: 20px 0;
 }
</style>
